<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 子账号中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
          <div class="u_list_item">  
             <el-button type="success" icon="plus" @click="addNewAccount">添加账号</el-button>
          </div>
        <div class="handle-box">
          <el-row>
  <el-col :span="5" v-for="(item, index) in userCenter"   style="margin:10px;">
    <el-card :body-style="{ padding: '0px' }" style="margin-bottom:20px;">
      <div style="padding: 14px;">  
        <div class="u_list_item">  
         <span class="m_avatar" style="background:url('../../../static/img/img.jpg');background-size:100% 100%;">
          <img :src="item.avatar" class="image" style="width:100%;border-radius:5px;">
         </span> 
        <span>{{item.name}}</span>
        </div>
        <div>
         <el-button v-for='item_auth in item.auth' type="success" plain class="btn-info auth_item">{{item_auth}}</el-button>
        
        </div>
        <div class="bottom clearfix">
          <el-button type="text" @click="editUInfo(item)" class="button">编辑信息</el-button>
          <el-button type="text" @click="iceUinfo(item)"  class="button" :class="item.state==1?'':'danger_text'">{{item.state==1?'立即冻结':'取消冻结'}}</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
</div>


  <el-dialog title="用户信息" :visible.sync="editMinfo">
  <el-form label-width="80px">
      
    <el-form-item label="用户名:">
    <el-input v-model="unewdata.name" auto-complete="off"  placeholder="请输入用户名" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="头像:">
   <el-upload class="avatar-uploader" name='image' :action="uploadURI"  :show-file-list="false" :on-success="handleAvatarSuccess">
   <img v-if="unewdata.showavatar" :src="unewdata.showavatar" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </el-form-item>
     <el-form-item label="新密码:">
      <el-input v-model="unewdata.pwd" auto-complete="off"  type="password" placeholder="请输入新密码(不更改无需输入)" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="密码确认:">
      <el-input v-model="unewdata.repwd" auto-complete="off"   type="password"  placeholder="请再次输入新密码(不更改无需输入)"  class="handle-input"></el-input>
    </el-form-item>

     <el-form-item label="备注信息:"  >
      <el-input  type="textarea"  :rows="4" v-model="unewdata.remark" placeholder="联系方式等备注信息..." auto-complete="off" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="权限分配:">

      <span class="a_item" v-for='item in typeCenter'>
      <label>{{item.auth_name}}</label><el-switch v-model="authArr[item.auth_id]" on-text="打开" off-text="关闭"></el-switch>
      </span>
         

         
    
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">关闭</el-button>
    <el-button type="danger" @click="updateMinfo">保存</el-button>
  </div>
</el-dialog>




      
      
    </div>
</template>

<script>
import * as rpConfig from '../../../rpConfig/constant'
import { HttpReq } from '../../service/server'
var Server = new HttpReq()
export default {
    data() {
        return {
            uploadURI: rpConfig.API_URI + '/Helpapi/uploadImg',
            editMinfo: false,
            dialogImageUrl: '',
            dialogVisible: false,
            userCenter: [],
            typeCenter: [],
            authArr: {},
            unewdata: {
                mid: 0,
                name: '',
                pwd: '',
                repwd: '',
                remark: '',
                auth: [],
                avatar: '',
                showavatar: ''
            }
        }
    },
    created() {
        this.getData()
        this.getType()
    },
    computed: {
        userAuth() {
            return 'test'
        }
    },
    methods: {
        handleAvatarSuccess(res) {
            if (res.code != 200) {
                this.$message.error(res.msg)
            } else {
                this.unewdata.showavatar = res.data.url
                this.unewdata.avatar = res.data.saveUrl
            }
        },
        getData() {
            let self = this
            Server._POST(rpConfig.API_URI + '/system.Index/getMList', {}, function(
                res
            ) {
                self.userCenter = res.data
            })
        },
        getType() {
            let self = this
            Server._POST(rpConfig.API_URI + '/system.Index/getAllAuth', {}, function(
                response
            ) {
                self.typeCenter = response.data
                for (let index of self.typeCenter) {
                    if (self.unewdata.auth.includes(index.auth_id)) {
                        self.$set(self.authArr, index.auth_id, true)
                    } else {
                        self.$set(self.authArr, index.auth_id, false)
                    }
                }
            })
        },
        clearInfo() {
            this.unewdata = {
                mid: 0,
                name: '',
                pwd: '',
                repwd: '',
                remark: '',
                auth: []
            }
        },
        addNewAccount() {
            this.editMinfo = true
        },
        closeEdit() {
            this.clearInfo()
            this.editMinfo = false
        },
        updateMinfo() {
            let self = this
            self.unewdata.auth = []
            for (var key in self.authArr) {
                if (self.authArr[key]) {
                    self.unewdata.auth.push(key)
                }
            }
            Server._POST(
                rpConfig.API_URI + '/system.Index/createAccount',
                self.unewdata,
                function(data) {
                  
                    self.$message.success(data.msg)
                    setTimeout(()=>{window.location.reload()},2000)
                  
                }
            )
        },

        editUInfo(uitem){

            this.unewdata['mid']=uitem.id
            this.unewdata['name']=uitem.name
            this.unewdata['showavatar']=uitem.avatar
            this.unewdata['remark']=uitem.remark
            for(let index of uitem.authId){
                this.$set(this.authArr, index, true)
            }
            this.editMinfo = true

        },
        iceUinfo(uitem){
            let self=this
            this.$confirm(uitem.state==1?'确认冻结该用户吗？':'确认取消冻结该用户吗？')
                .then(() => {
                    Server._POST(
                        rpConfig.API_URI + '/system.Index/iceAccount',
                        {'mid':uitem.id,'type':uitem.state==1?0:1},
                        function(data) {
                            self.$message.success(data.msg)
                            setTimeout(()=>{window.location.reload()},2000)
                        }
                    )
                })
                .catch(() => {})

        }
    }
}
</script>

<style scoped>
.a_item {
  display: inline-block;
  margin: 5px;
}
.a_item label {
  margin-right: 5px;
}
.auth_item {
  margin: 5px;
}
.u_list_item {
  margin-bottom: 10px;
}
.m_avatar {
  display: inline-block;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  border-radius: 5px;
}
.btn-info {
  padding: 5px 10px;
}
.handle-box {
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9c2;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>